<template>
    <div class="editor"></div>
</template>

<script>
import Editor from 'wangeditor';

const wait = 600;

export default {
    data() {
        return {
            editor: null,
        };
    },

    props: {
        isPlainText: {
            type: Boolean,
            default: false,
        },
        value: String,
    },

    watch: {
        isPlainText: 'emitValue',
    },

    methods: {
        // 清空
        clear() {
            this.editor.txt.clear();
        },

        // 设置值
        setValue(val) {
            this.editor.txt.html(val);
        },

        // 获取值
        getValue() {
            return this.isPlainText ? this.editor.txt.text().trim() : this.editor.txt.html().trim();
        },

        // 上发值
        emitValue() {
            this.$emit('input', this.getValue());
        },
    },
    mounted() {
        let editor = new Editor(this.$el);
        editor.config.height = 240;
        editor.config.excludeMenus = ['video', 'code', 'splitLine', 'emoticon', 'undo', 'redo'];
        editor.config.lineHeights = ['1.6', '1.8', '2', '2.2'];
        editor.config.fontSizes = {
            'x-small': { name: '12px', value: '1' },
            small: { name: '14px', value: '2' },
            normal: { name: '16px', value: '3' },
            large: { name: '18px', value: '4' },
            'x-large': { name: '24px', value: '5' },
            'xx-large': { name: '32px', value: '6' },
            'xxx-large': { name: '48px', value: '7' },
        };
        editor.config.onchange = this.emitValue;
        // _editor.config.onchange = this.emitValue;

        this.editor = editor;

        editor.create();
    },
};
</script>